<template>
  <div>
    <div
      ref="wrapper"
      :style="{'-webkit-overflow-scrolling': scrollMode,height:'9rem',overflow:'scroll'}"
    >
      <v-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore"
      >
        <ul class="invite_wrap">
          <li v-for="(item ,index) in inviteArr" :key="index">
            <div class="icon">
              <img src="../../../assets/img/ps_1.png" alt>
            </div>
            <div class="half">
              <div class="tit">{{item.NickName}}</div>
              <div class="phone">电话：{{item.Accounts.substr(0,3)+"****"+item.Accounts.substr(7)}}</div>
            </div>
            <div class="half halfR">
              <div class="time">注册时间{{(item.RegisterDate).toString().split(' ')[0]}}</div>
              <div class="btn">
                <span v-if="item.Dj=='0'">章鱼矿工</span>
                <span v-if="item.Dj=='1'">以太矿工</span>
                <span v-if="item.Dj=='2'">比特矿工</span>
              </div>
            </div>
          </li>
        </ul>
      </v-loadmore>
    </div>
  </div>
</template>
<script>
import { Loadmore } from "mint-ui";
import { GetYaoQing } from "../../../api";
import { getGuid } from "../../../utils/index";
import direct from "./direct";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      inviteArr: [],
      scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      totalpage: 0, //一共多少页数
      totalpage1: 0,
      pageNo: 0,
      PageSize: 10,
      id: localStorage.zyUserId,
      contentH: 0
    };
  },
  mounted() {
    this.loadPageList(this.pageNo); //初次访问查询列表
    this.$nextTick(function() {
      this.contentH =
        document.documentElement.clientHeight -
        this.$refs.wrapper.getBoundingClientRect().top;
    });
  },
  components: {
    "v-loadmore": Loadmore
  },
  methods: {
    // 上拉加载
    loadBottom: function() {
      this.more(); // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    more() {
      // 分页查询
      if (this.totalpage == 1) {
        this.pageNo = 1;
        this.allLoaded = true;
      } else {
        this.pageNo = parseInt(this.pageNo) + 1;
        this.allLoaded = false;
      }
      this.loadPageList(this.pageNo); //初次访问查询列表
    },
    loadPageList(pageNo) {
      GetYaoQing({
        ID: this.id,
        LoginMachine: getGuid(),
        YJEYhOld: "",
        YJEYhNew: "",
        PageNo: pageNo,
        RegType: "1",
        PageSize: this.PageSize
      }).then(res => {
        if (!res.data.EntityList[0].ZTLBTotal) {
          Toast({
            message: "暂无数据",
            duration: 2000
          });
          return;
        }
        this.inviteAll = res.data.EntityList[0];
        res.data.EntityList[0].ZTLB.forEach(item => {
          this.inviteArr.push(item);
        });
        this.totalpage = Math.ceil(
          res.data.EntityList[0].ZTLBTotal / this.pageSize
        );
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.invite_wrap {
  width: 100%;

  li {
    display: flex;
    height: 0.82rem;
    margin-bottom: 15px;

    .icon {
      flex: 0 1 0.72rem;
      width: 0.72rem;
      height: 0.73rem;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .halfR {
      text-align: right;
      position: relative;

      .btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    .half {
      flex: 1;
      display: flex;
      flex-direction: column;

      .txt {
        font-size: 13px;
        line-height: 0.7rem;
        color: #4E5063;
      }

      .phone {
        font-size: 10px;
        line-height: 0.5rem;
        color: #4E5063;
      }

      .time {
        font-size: 10px;
        color: #919191;
      }

      .btn {
        width: 1.59rem;
        height: 0.44rem;
        line-height: 0.44rem;
        text-align: center;
        background: #4E5063;
        border-radius: 0.22rem;
        margin-top: 5px;
        font-size: 14px;
        color: #D6A163;
      }
    }
  }
}
</style>
